<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<th:block th:include="include :: bootstrap-switch-css" />
<body class="gray-bg">
<div class="container-div">
	<form class="form-horizontal m" id="form-upkeepTemplate-add" th:object="${upkeepTemplate}">
		<div class="tabs-container">
			<div class="panel-body">
				<h4 class="title-ele overhaul-tit">基本信息</h4>
				<div class="row overhaul">
					<input id="templateId" name="templateId" type="hidden" th:field="*{templateId}"/>
					<div class="row  m-l-r">
						<div style="margin:20px 15px;">
							<div class="form-group">
								<label class="col-sm-2 control-label">模板名称：</label>
								<div class="col-sm-5">
									<input id="templateName" name="templateName" class="form-control" th:field="*{templateName}" type="text" required>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">电梯类型：</label>
								<div class="col-sm-5">
									<select id="elevatorType" name="elevatorType" th:field="*{elevatorType}" class="form-control m-b" disabled>
										<option value="1">直梯</option>
										<option value="2">扶梯</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">保养类型：</label>
								<div class="col-sm-5">
									<select id="upkeepType" class="form-control m-b" th:field="*{upkeepType}" th:with="type=${@dict.getType('business_upkeep_type')}">
										<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label">备注：</label>
								<div class="col-sm-5">
									<input id="remark" name="remark" class="form-control" th:field="*{remark}" type="text">
								</div>
							</div>
						</div>
					</div>
				</div>

				<!--直梯项目保养清单-->
				<div id="straight_ladder" th:if="${upkeepTemplate.elevatorType} == '1'">
					<div class="panel-heading">
						<ul class="nav nav-tabs nav1">
							<li class="active"><a href="#tab-1-1" onclick="" data-toggle="tab">机房</a></li>
							<li><a href="#tab-1-2" onclick="" data-toggle="tab">层站</a></li>
							<li><a href="#tab-1-3" onclick="" data-toggle="tab">轿厢</a></li>
							<li><a href="#tab-1-4" onclick="" data-toggle="tab">井道</a></li>
						</ul>
					</div>
					<div class="panel-body">
						<div class="tab-content">
							<div class="tab-pane active" id="tab-1-1">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-1">
										<tr th:each="item_1 : ${projectItem_list_1}">
											<td><input th:value="${item_1.projectName}" name="projectName_1" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input th:value="${item_1.projectRequire}" name="projectRequire_1" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										<tr>
											<td><input name="projectName_1" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_1" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-2">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-2">
										<tr th:each="item_2 : ${projectItem_list_2}">
											<td><input th:value="${item_2.projectName}" name="projectName_2" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input th:value="${item_2.projectRequire}" name="projectRequire_2" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										<tr>
											<td><input name="projectName_2" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_2" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-3">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-3">
										<tr th:each="item_3 : ${projectItem_list_3}">
											<td><input th:value="${item_3.projectName}" name="projectName_3" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input th:value="${item_3.projectRequire}" name="projectRequire_3" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										<tr>
											<td><input name="projectName_3" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_3" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
							<div class="tab-pane" id="tab-1-4">
								<div class="table-responsive">
									<table class="table table-bordered table-hover no-border main-icon">
										<thead>
										<tr>
											<th>保养项名称</th>
											<th>保养项要求</th>
											<th></th>
										</tr>
										</thead>
										<tbody id="tbody-1-4">
										<tr th:each="item_4 : ${projectItem_list_4}">
											<td><input th:value="${item_4.projectName}" name="projectName_4" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input th:value="${item_4.projectRequire}" name="projectRequire_4" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										<tr>
											<td><input name="projectName_4" class="form-control" placeholder="请输入保养项名称"></td>
											<td><input name="projectRequire_4" class="form-control" placeholder="请输入保养项要求"></td>
											<td>
												<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
												<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
											</td>
										</tr>
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
				</div>

				<!-- 扶梯项目保养清单 -->
				<div id="escalator" th:if="${upkeepTemplate.elevatorType} == '2'">
					<div class="table-responsive">
						<table class="table table-bordered table-hover no-border main-icon">
							<thead>
							<tr>
								<th>保养项名称</th>
								<th>保养项要求</th>
								<th></th>
							</tr>
							</thead>
							<tbody>
							<tr th:each="item_0 : ${projectItem_list_0}">
								<td><input th:value="${item_0.projectName}" name="projectName_0" class="form-control" placeholder="请输入保养项名称"></td>
								<td><input th:value="${item_0.projectRequire}" name="projectRequire_0" class="form-control" placeholder="请输入保养项要求"></td>
								<td>
									<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
									<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
								</td>
							</tr>
							<tr>
								<td><input name="projectName_0" class="form-control" placeholder="请输入保养项名称"></td>
								<td><input name="projectRequire_0" class="form-control" placeholder="请输入保养项要求"></td>
								<td>
									<a class="search-edit" onclick="addItem(this);" href="javaScript:void(0);"><i class="fa fa-plus"></i></a>
									<a class="search-edit" onclick="deleteItem(this);" href="javaScript:void(0);"><i class="fa fa-minus"></i></a>
								</td>
							</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>
<div th:include="include::footer"></div>
<th:block th:include="include :: bootstrap-switch-js" />
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script type="text/javascript">
    var prefix = ctx + "business/upkeepTemplate"
    $("#form-upkeepTemplate-edit").validate({
        rules:{
            xxxx:{
                required:true,
            },
        }
    });

    function submitHandler() {
        var templateId = $("#templateId").val();
        var templateName = $("input[name='templateName']").val();
        var elevatorType = $("#elevatorType option:selected").val();
        var upkeepType = $("#upkeepType option:selected").val();
        var remark = $("input[name='remark']").val();

        var projectName_0 = $("input[name='projectName_0']").map(function () { return this.value; }).get().join(",");
        var projectRequire_0 = $("input[name='projectRequire_0']").map(function () { return this.value; }).get().join(",");
        var projectName_1 = $("input[name='projectName_1']").map(function () { return this.value; }).get().join(",");
        var projectRequire_1 = $("input[name='projectRequire_1']").map(function () { return this.value; }).get().join(",");
        var projectName_2 = $("input[name='projectName_2']").map(function () { return this.value; }).get().join(",");
        var projectRequire_2 = $("input[name='projectRequire_2']").map(function () { return this.value; }).get().join(",");
        var projectName_3 = $("input[name='projectName_3']").map(function () { return this.value; }).get().join(",");
        var projectRequire_3 = $("input[name='projectRequire_3']").map(function () { return this.value; }).get().join(",");
        var projectName_4 = $("input[name='projectName_4']").map(function () { return this.value; }).get().join(",");
        var projectRequire_4 = $("input[name='projectRequire_4']").map(function () { return this.value; }).get().join(",");

        var url = prefix + "/edit";
        if(templateId == ""){
            url = prefix + "/add";
        }
        $.ajax({
            cache : true,
            type : "POST",
            url : url,
            data : {
                "templateId" : templateId,
                "templateName": templateName,
                "elevatorType": elevatorType,
                "upkeepType": upkeepType,
                "remark": remark,

                "projectName_0": projectName_0,
                "projectName_1": projectName_1,
                "projectName_2": projectName_2,
                "projectName_3": projectName_3,
                "projectName_4": projectName_4,
                "projectRequire_0": projectRequire_0,
                "projectRequire_1": projectRequire_1,
                "projectRequire_2": projectRequire_2,
                "projectRequire_3": projectRequire_3,
                "projectRequire_4": projectRequire_4
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(s) {
                $.operate.successCallback(s);
            }
        });
    }


    function addItem(obj){
        //初始化“+”的点击事件
        var add_html = $(obj).parent().parent().clone();
        $(add_html).find("input").val("");
        $(obj).parent().parent().after(add_html);
    }

    function deleteItem(obj){
        //初始化“-”的点击事件
        $(obj).parent().parent().remove();
    }


</script>
</body>
</html>
